<template>
	<view class="page-wraper">
		<view class="header-view-box">
			<view class="view-box">
				<view :class="temp==1?'view-item-selected':'view-item'" @click="viewItemClick(1)">
					<image class="view-item-image" src="@/static/car.png" v-if="temp==1" />
					<image class="view-item-image" src="@/static/car-black.png" v-else />
					<text :class="temp==1?'view-item-text-selected':'view-item-text'">出售中</text>
				</view>
				<view :class="temp==0?'view-item-selected':'view-item'" @click="viewItemClick(0)">
					<image class="view-item-image" src="@/static/car.png" v-if="temp==0" />
					<image class="view-item-image" src="@/static/car-black.png" v-else />
					<text :class="temp==0?'view-item-text-selected':'view-item-text'">已下架</text>
				</view>
			</view>
			<view class="select-car-model" @click="clickSelectView()">
				<view>
					<text class="select-car-model-text">{{select_model}}</text>
					<image class="view-item-image-small" src="@/static/downArrorw-black.png" />
				</view>
			</view>
		</view>
		<view class="NO-DATA-view-box-class" v-if="temp==1?carSellSrouceDataList.length<=0?true:false:false">
			<image src="@/static/NoDataBac.png" class="NO-DATA-image-view-class"></image>
			<view class="NO-DATA-text-chushou-class">暂无出售中车源</view>
		</view>
		<view class="NO-DATA-view-box-class" v-if="temp==0?carUnsoldSrouceDataList.length<=0?true:false:false">
			<image src="@/static/NoDataBac.png" class="NO-DATA-image-view-class"></image>
			<view class="NO-DATA-text-chushou-class">暂无下架车源</view>
		</view>

		<view class="list-class" v-if="isShowList">

			<scroll-view scroll-y="true" class="scroll-view-class" :style="'height:' + scroll_height+';width:694rpx;'"
				refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="lower">
				<uniListCarSource class="scroll-view-class" :data="carSellSrouceDataList" selecteItem="0"
					@change='change' v-show="temp==1" @tap_item_down='tap_item_down' @tap_item_edit='tap_item_edit' />
				<uniListCarSource class="scroll-view-class" :data="carUnsoldSrouceDataList" selecteItem="1"
					@change='change' @tap_item_del='tap_item_del' @tap_item_Up='tap_item_Up' v-show="temp==0" />
				<view v-if="SellisShowMore?carSellSrouceDataList.length>0?true:false:false"
					class="no-more-text-bottom-class">没有更多了</view>
				<view v-if="UnsolisShowMore?carUnsoldSrouceDataList.length>0?true:false:false"
					class="no-more-text-bottom-class">没有更多了</view>
			</scroll-view>

		</view>

		<image src="@/static/send-image.png" class="send-view-box" @click="sendClick()"></image>
	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	import {
		deleteMeCarSource,
		usedCarMyList,
		usedCarOffShelf,
		upMeCarSource,
		usedCarEditDetails,
		getUsedCarDetails
	} from '@/api/secondhandCar.js';
	export default {
		components: {
			uniListCarSource
		},
		data() {
			return {
				temp: 1,
				carSellSrouceDataList: [], //出售中数据列表
				carUnsoldSrouceDataList: [], //已下架数据列表
				scroll_height: '600px',
				isRefresher: false, //下拉刷新状态

				page_num: 20,


				Sellpage: 1, //第几页数据
				Selllast_page: 0, //总页数
				SellisShowMore: false,

				Unsolpage: 1, //第几页数据
				Unsollast_page: 0, //总页数
				UnsolisShowMore: false,

				// scrollTop: 0,

				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: true,

				select_model: '选择车型',

				users_id: '',
				endName: '',
				model_two_id:''
			}
		},
		onLoad() {
			const value = uni.getStorageSync('login')
			if (value) {
				this.users_id = value.id
			}
			const location = uni.getStorageSync('address')
			this.$utils.log("dayiin huoqudao de xinagqing location  " + JSON.stringify(location))
			if (location) {
				this.endName = location.name
			}
			this.scroll_height = uni.getSystemInfoSync().windowHeight - 109 + 'px';
			this.getMeCarSourceList(this.Sellpage)
		},
		onShow() {
			this.temp = 1
			this.$utils.log("打印onShow ======= ")
			this.getMeCarSourceList(this.Sellpage)
			this.$utils.stopPage() //禁止页面本身的滑动

		},
		/**
		 * onHide()触发的场景：
		 *导航页1>>导航页2，会触发导航页1  onHide（）
		 *
		 *导航页>>子页面，会触发导航页  onHide（）
		 *
		 *子页面1>>子页面2，会触发子页面1  onHide（）
		 **/
		onHide() {
			this.$utils.movePage()
		},
		/**
		 *onUnload()触发的场景：
		 *从子页面2返回到子页面1，会触发子页面2的onUnload()
		 *
		 *从子页面返回到导航页，会触发子页面的onUnload()
		 */
		onUnload() {
			this.$utils.movePage()
		},
		methods: {
			backData(obj) {
				this.$utils.log("打印选择返回的车型  " + JSON.stringify(obj))
				this.select_model = obj.name
				this.model_two_id = obj.id || ''
				this.getMeCarSourceList(1)
			},

			//删除我的下架数据
			tap_item_del(item, index) {
				var that = this
				this.$utils.log('点击了item项的删除按钮' + index)
				var data = {}
				data.id = item.id
				deleteMeCarSource(data).then(res => {
					that.$utils.log('点击了item项的删除按钮 网络返回的数据' + JSON.stringify(res))
					if (res.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						that.carUnsoldSrouceDataList.splice(index, 1);
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},

			//上架我的下架数据
			tap_item_Up(item, index) {
				this.$utils.log('点击了item项的上架按钮' + JSON.stringify(item))
				uni.navigateTo({
					url: '/secondhandCar/meCarSource/editMeCarSource/editMeCarSource?carId=' + item.id +
						'&index=' + index
				})
			},
			//下架
			tap_item_down(item, index) {
				var that = this
				this.$utils.log('点击了item项的下架按钮' + item)
				const data = {}
				data.id = item.id
				usedCarOffShelf(data).then(res => {
					if (res.code == 0) {
						that.$nextTick(() => {
							that.carSellSrouceDataList.splice(index, 1);
							that.$forceUpdate()
						})
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					that.$utils.log("打印下架返回的数据  " + JSON.stringify(res))

				})
			},

			//跳转编辑详情
			tap_item_edit(item, index) {
				this.$utils.log('点击了item项的编辑按钮' + JSON.stringify(item))
				uni.navigateTo({
					url: '/secondhandCar/meCarSource/editMeCarSource/editMeCarSource?carId=' + item.id +
						'&index=' + index
				})
			},
			viewItemClick(inta) {
				this.temp = inta
				if (this.temp == 0) { //下架列表
					this.getMeCarSourceList(this.Unsolpage)
				} else {
					this.getMeCarSourceList(this.Sellpage)
				}

			},
			clickSelectView() {
				if (this.select_model == '选择车型') {
					this.$utils.log("点击选择车型按钮")
					uni.navigateTo({
						url: '/pages/home/selectBrand/selectBrand?brand_type=search'
					})
				} else {
					this.select_model = '选择车型'
					this.model_two_id = ''
					this.getMeCarSourceList(1)
				}
			},
			change(item) {
				var that = this
				getUsedCarDetails(item.id, this.users_id, this.endName).then(res => {
					// that.$utils.log("dayiin huoqudao de xinagqing xinxi  " + JSON.stringify(res))
					if (res.code == 0) {
						that.dataObject = res.data
						// that.fmObjectToArr(that.dataObject)
						if (that.temp != 0) {
							that.$utils.log("点击了item项" + JSON.stringify(item))
							uni.navigateTo({
								url: '/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' +
									item.id + '&isContent=' + true,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									acceptDataFromOpenedPage: function(data) {
										that.$utils.log("打印返回数据 acceptDataFromOpenedPage  " + JSON
											.stringify(data))
									},
									someEvent: function(data) {
										that.$utils.log("打印返回数据 someEvent   " + JSON.stringify(data))
									}
								},
								success: function(res) {
									that.$utils.log("打印发送数据 success   " + JSON.stringify(that
										.dataObject))
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('acceptDataFromOpenerPage', that.dataObject)
								},
								fail: function(error) {
									that.$utils.log("打印发送数据 fail   " + JSON.stringify(error))
								}
							})
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})


			},
			sendClick() {
				this.temp = -1
				uni.navigateTo({
					url: '/secondhandCar/sendCarSource/sendCarSource'
				})
			},
			//请求数据的方法
			getMeCarSourceList(page) {
				var that = this
				this.isRefresher = true
				usedCarMyList(this.users_id, this.temp, this.page_num, page, this.model_two_id).then(res => {
					uni.showLoading({})
					that.$utils.log("打印我的发布车源数据   " + JSON.stringify(res))
					if (res.data.data) {
						// that.isShowList = false
						that.$nextTick(() => {
							if (page == 1) {
								if (that.temp == 1) {
									that.carSellSrouceDataList = []
									that.carSellSrouceDataList = res.data.data
								} else {
									that.carUnsoldSrouceDataList = []
									that.carUnsoldSrouceDataList = res.data.data
								}
								that.triggered = false
								that.isfreshing = false
							} else {
								if (that.temp == 1) {
									for (var i = 0; i < res.data.data.length; i++) {
										that.carSellSrouceDataList.push(res.data.data[i]); // 加载的数据追加在上一页后面
									}
								} else {
									for (var i = 0; i < res.data.data.length; i++) {
										that.carUnsoldSrouceDataList.push(res.data.data[
											i]); // 加载的数据追加在上一页后面
									}
								}
								that.isEnd = false
							}
							if (that.temp == 1) {
								that.Selllast_page = res.data.last_page
							} else {
								that.Unsoldlast_page = res.data.last_page
							}
							if (that.Unsoldlast_page == that.Unsolpage & that.temp == 0) {
								that.UnsolisShowMore = true
								var _that = that
								setTimeout(() => {
									_that.UnsolisShowMore = false
								}, 2000)

							} else {
								that.UnsolisShowMore = false
							}
							if (that.Selllast_page == that.Sellpage & that.temp == 1) {
								that.SellisShowMore = true
								var _that = that
								setTimeout(() => {
									_that.SellisShowMore = false
								}, 2000)
							} else {
								that.SellisShowMore = false
							}

							that.$forceUpdate()
							// that.isShowList = true
							uni.hideLoading({})
						})

					}
				})
			},

			onRefresh() {
				if (!this.triggered) {
					if (this.isfreshing) return;
					this.isfreshing = true;
					if (!this.triggered) {
						this.triggered = true;
					}
					if (this.temp == 1) {
						this.Sellpage = 1
					} else {
						this.Unsolpage = 1
					}
					this.$utils.log("触发下拉刷新  第1个  111111 refresherrefreshFun")
					this.getMeCarSourceList(1)
				}
			},

			lower() {
				if (this.temp == 1) {
					if (!this.SellisShowMore) {
						if (!this.isEnd) {
							this.isEnd = true
							if (this.Sellpage < this.Selllast_page) {
								this.Sellpage = this.Sellpage + 1
								this.getMeCarSourceList(this.Sellpage)
							} else {
								this.$utils.log("没有数据了")
								uni.showToast({
									title: '没有数据了',
									icon: 'none'
								})
							}

						}
					}

					if (this.SellisShowMore) {
						setTimeout(() => {
							this.SellisShowMore = false
						})
					}

				} else {
					if (!this.UnsolisShowMore) {
						if (!this.isEnd) {
							this.isEnd = true
							if (this.Unsolpage < this.Unsollast_page) {
								this.Unsolpage = this.Unsolpage + 1
								this.getMeCarSourceList(this.Unsolpage)
							} else {
								this.$utils.log("没有数据了")
								uni.showToast({
									title: '没有数据了',
									icon: 'none'
								})
							}

						}
					}
					if (this.UnsolisShowMore) {
						setTimeout(() => {
							this.UnsolisShowMore = false
						})
					}
				}

			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}

	.send-view-box {
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 20;
		border-radius: 50%;
		width: 130rpx;
		height: 130rpx;
		margin-bottom: 80rpx;
		margin-right: 60rpx;
	}

	.select-car-model-text {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000126;
		opacity: 1;
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 11;
	}

	.view-box {
		display: flex;
		background-color: white;
	}

	.view-item-selected {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #416CD1;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.view-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #F0F0F0;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.view-item-image {
		width: 50.98rpx;
		height: 45.68rpx;
	}

	.view-item-text {
		margin: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		color: #000126;
		opacity: 1;
	}

	.view-item-text-selected {
		margin: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
		opacity: 1;
	}

	.select-car-model {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-color: white;
	}

	.view-item-image-small {
		margin-left: 8rpx;
		width: 20rpx;
		height: 12rpx;
		opacity: 1;
	}

	.list-class {
		width: 100%;
		margin-top: 218rpx;
		padding: 0rpx 28rpx;
	}

	.no-more-text-bottom-class {
		height: 180rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 46rpx;
	}

	.NO-DATA-view-box-class {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.NO-DATA-image-view-class {
		width: 380rpx;
		height: 380rpx;
		margin: auto;
		margin-top: 208rpx;
	}

	.NO-DATA-text-chushou-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}

	.scroll-view-class {
		width: 100%;
	}
</style>